import React from "react";
import './Demo.css'
import { changeTime } from "./tool";

// class Demo extends React.Component{
//     constructor(){
//         super();
//         this.state = {title:'事件绑定'};
//         this.handleClick = this.handleClick.bind(this);

//         // this.state = {}
//     } ;
//     render(){
//         return <div>
//             <h2>{this.state.title}</h2>
//         </div>
//     }
// }

//拿到this
//(1)在constructor中bind(2)箭头函数
//对类
//this指向new出的实例；保证每次new出的实例所有声明
//如果不绑定，最终指向undefined
//找this在类中
//get箭头函数-->

export default class Demo extends React.Component {
    constructor() {
        super();
        // this.state = { title: '事件绑定' };
        this.getData = this.getData.bind(this);//绑定方法使用时用新的方法
    };

    //list:[]线设置为空！！！
    state = {title: '事件绑定' ,list:[]}
    getData() {
        // console.log('getData');
        // console.log(this);
        this.setState({title:'宋亚轩'})
    }

    get = () =>{
        // console.log(this)
        fetch('https://cnodejs.org/api/v1/topics')
        .then(res=>res.json())
        .then(res=>{
            console.log(res);
            this.setState({list:res.data})
        })

        this.setState({title: '箭头get函数' })//箭头函数绑定
        // console.log(this.setState)
    }
    
    componentDidMount(){
        fetch('https://cnodejs.org/api/v1/topics')
        .then(res=>res.json())
        .then(res=>{
            console.log(res);
            this.setState({list:res.data})
        })
    }

    // getDetails =()=>{
    //     fetch('https://cnodejs.org/api/v1/topics')
    //     .then(res=>res.json())
    //     .then(res=>{
    //         this.setState({title:res});
    //     })
    // }//??




    //！！！！constructor之后render会先执行，因为render调用的map，所以上面设置的是list:[]数组
    render() {
        return (
            <div>
                <h2>{this.state.title}</h2>
                <button onClick={this.getData}>获取数据</button>
                <button onClick={this.get}>箭头函数绑定</button>
                <ul className="list">
                    
                    {//Map有返回值，放入数组Map（项目，索引）
                        this.state.list.map(item=>{
                            return <li key={item.id}>
                                <img src={item.author.avatar_url}></img>
                                <span>
                                {item.reply_count}/
                                {item.visit_count}
                                </span>
                                
                                {item.title}
                                
                                <span>
                                {item.create_at}
                                </span>
                                <span>
                                {item.last_active_time}
                            </span>
                            <span>
                                {changeTime(item.last_reply_at)}
                            </span>
                            
                            </li>
                            //key值复用；用于区分？删除、插入下方顺序不会改变
                        })
                    }
                </ul>
                {/* <button onClick={this.getDetails}>数据项</button> */}

            </div>
        )
    }
}



// class Demo extends React.Component{
//     constructor(){
//         super();
//         this.state = {title:'事件绑定'};
//         this.handleClick = this.handleClick.bind(this);

//         // this.state = {}
//     }
//     handleClick(){
//         console.log(this);
//         this.setState({title:'new title'})
//         console.log('click');
//     }
//     handleClick2 = ()=>{
//         this.setState({title:'new title'})
//     }
//     render(){
//         return <div>
//             <button onClick={this.handleClick}>更新状态</button>
//             <button onClick={this.handleClick2}>更新状态2</button>
//             <h2>{this.state.title}</h2>
//         </div>
//     }
// }


// export default Demo;